'use client'
import React, { useEffect, useMemo } from 'react'
import MapBoxDraw from "@mapbox/mapbox-gl-draw";
import mapboxgl from 'mapbox-gl';
import * as turf from '@turf/turf';
import style from './calculate.module.css';
import 'mapbox-gl/dist/mapbox-gl.css';

const page = () => {

    let next_map = useMemo<any>(() => null, [])
    let next_map_draw = useMemo<any>(() => null, [])

    const init = () => {
        console.log('init');

        mapboxgl.accessToken = 'pk.eyJ1IjoiZW1iZXJlZWVlIiwiYSI6ImNsbG9tZnhhdTBjOW0zZW9hNndjMDBheWQifQ.2tdcbznsaY7x4V0snpV9ZA';
        const map = new mapboxgl.Map({
            container: 'map', // container ID
            projection: 'globe',
            style: 'mapbox://styles/mapbox/outdoors-v12',
            center: [140.4670, 37.75],
            zoom: 10
        });

        const draw = new MapBoxDraw({
            displayControlsDefault: false,
            // Select which mapbox-gl-draw control buttons to add to the map.
            controls: {
                polygon: true,
                trash: true
            },
            // Set mapbox-gl-draw to draw by default.
            // The user does not have to click the polygon control button first.
            defaultMode: 'draw_polygon'
        });
        map.addControl(draw);

        next_map = map;
        next_map_draw = draw;
        console.log({ next_map, next_map_draw });


        map.on('draw.create', updateArea);
        map.on('draw.delete', updateArea);
        map.on('draw.update', updateArea);

        function updateArea(e: any) {
            const data = draw.getAll();
            const answer = document.getElementById('calculated-area');
            if (data.features.length > 0) {
                const area = turf.area(data);
                // Restrict the area to 2 decimal points.
                const rounded_area = Math.round(area * 100) / 100;
                answer!.innerHTML = `<p><strong>${rounded_area}</strong></p><p>square meters</p>`;
            } else {
                answer!.innerHTML = '';
                if (e.type !== 'draw.delete')
                    alert('Click the map to draw a polygon.');
            }
        }


        console.log(draw);

    }



    const startDrawPolygon = () => {
        if (next_map_draw === null) return
        next_map_draw.changeMode('draw_polygon')
    }
    const direct_select = () => {
        if (next_map_draw === null) return
        next_map_draw.changeMode('direct_select')
    }
    const simple_select = () => {
        if (next_map_draw === null) return
        next_map_draw.changeMode('simple_select')
    }
    const delPolygon = () => {
        if (next_map_draw === null) return

        // const features = next_map_draw.getSelected()
        // console.log(next_map_draw, features);
        next_map_draw.trash();
    }
    useEffect(() => {
        init()
    }, [])
    return (
        <div>
            <div className='mapbox_container' id="map"></div>
            <div className={style.calculationBox}>
                <p>Click the map to draw a polygon.</p>
                <div id="calculated-area" className={style.calculationResult}></div>
            </div>
            <div className={style.controls}>
                <button className={style.button}
                    onClick={() => startDrawPolygon()}
                >draw_polygon</button>
                <button className={style.button}
                    onClick={() => delPolygon()}

                >del_polygon</button>

                <button className={style.button}
                    onClick={() => direct_select()}

                >direct_select</button>

                <button className={style.button}
                    onClick={() => simple_select()}

                >simple_select</button>
                {/* <But >draw-polygon</button> */}
            </div>
        </div>
    )
}

export default page